<template>
  <div class="orgainzationManagement">
    <el-container class="orgainzation-box">
      <el-header height="auto" class="orgainzationManagement-top">
        <el-form
          :inline="true"
          :model="formData"
          class="el-form--inline certificateForm"
        >
          <el-form-item label="关联公司名称">
            <el-input v-model="formData.companyName" placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button @click.stop="reset">重置</el-button>
            <el-button
              :loading="submitLoading"
              type="primary"
              @click.stop="searchForm"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </el-header>
      <el-editable
        class="org-table"
        v-loading="submitLoading"
        :data="tableData"
        height="200"
        :custom-attr="$TABLE_HEAD['systemSetup.companyRelation.list']"
        :columns="orgainzationColumns"
      >
        <template slot="default-operation" slot-scope="{row}">
          <el-button
            size="small"
            v-if="row.relationStatus != 1 && row.relationStatus != 0"
            @click.stop="delRelation(row)"
            type="text text-primary"
            >删除</el-button
          >
          <el-button
            size="small"
            v-if="row.relationStatus == 0"
            @click.stop="toRelativeHandle(row, 2)"
            type="text text-primary"
            >取消关联</el-button
          >
          <el-button
            size="small"
            v-if="row.relationStatus == 0 && row.relationType == 1"
            @click.stop="toRelativeHandle(row, 1)"
            type="text text-primary"
            >确认关联</el-button
          >
          <el-button
            size="small"
            v-if="row.relationStatus == 1"
            @click.stop="toRelativeHandle(row, 3)"
            type="text text-primary"
            >解除关联</el-button
          >
        </template>
      </el-editable>
      <!-- 分页插件 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="curPage"
          :page-sizes="PAGE_NUMBER"
          :page-size="pageSize"
          :layout="PAGINATION_LAYOUT"
          :total="total"
        />
      </div>
    </el-container>
    <el-dialog
      title="添加企业"
      @close="dialogClose"
      :visible.sync="addDialog.visible"
      width="30%"
    >
      <div class="add-company-dialog" v-loading="addDialog.loading">
        <el-input
          placeholder="请输入"
          clearable
          @input="pushRelationCompany"
          v-model="addDialog.searchKey"
        >
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
        <el-radio-group class="checkbox-box" v-model="addDialog.radioVal">
          <el-radio
            :key="index"
            v-for="(item, index) in addDialog.companyList"
            :label="item"
            >{{ item.companyName }}</el-radio
          >
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click.stop="addDialog.visible = false">取 消</el-button>
        <el-button
          type="primary"
          :loading="addDialog.btnLoading"
          @click.stop="addRelationCompany"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  UcCompanyRelationPageList,
  UcCompanyRelationDeleteById,
  updateRelationStatus,
  getCompanyList,
  UcCompanyRelationSave
} from '@const/api_staffCenter.js'
import {PAGINATION_LAYOUT, PAGE_NUMBER} from '@const/common.js'
import ElEditable from '@components/el-editable/door/index.vue'
import {orgainzationColumns} from './const.js'
import {hasIn} from 'lodash'
export default {
  components: {ElEditable},
  data() {
    return {
      formData: {
        companyName: '' // 公司名称
      },
      addDialog: {
        visible: false,
        loading: false,
        btnLoading: false,
        radioVal: '',
        searchKey: '',
        companyList: []
      },
      submitLoading: false, // 查询按钮的loading
      orgainzationColumns, // 表头信息
      tableData: [], // 组织列表的数据
      PAGE_NUMBER, // 分页数字
      pageSize: PAGE_NUMBER[0], // 分页类型
      PAGINATION_LAYOUT, // 分页功能
      total: 0, // 分页的总共的条数
      curPage: 1 // 分页的绑定的数据
    }
  },
  mounted() {
    this.initial()
    let obj = {
      type: 'btn',
      arr: [
        {
          val: '添加',
          type: 'primary',
          handle: this.pushRelationCompany
        }
      ]
    }
    this.$store.commit('changeLayoutHandle', obj)
  },
  methods: {
    // 当前页面
    handleCurrentChange(curPage) {
      this.curPage = curPage
      this.initial()
    },
    dialogClose() {
      this.addDialog.radioVal = ''
      this.addDialog.searchKey = ''
    },
    // 页面的大小
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.initial()
    },
    // 添加关联公司弹出层
    pushRelationCompany() {
      this.addDialog.visible = true
      this.addDialog.loading = true
      this.$axios({
        url: `${getCompanyList}?companyName=${this.addDialog.searchKey}`,
        method: 'get'
      })
        .then(res => {
          this.addDialog.companyList = hasIn(res, ['data', 'payload'])
            ? res.data.payload
            : []
        })
        .finally(() => {
          this.addDialog.loading = false
        })
    },
    // 添加关联公司
    addRelationCompany() {
      if (!this.addDialog.radioVal) {
        this.$message({type: 'warning', message: '请选择关联公司！'})
        return
      }
      this.addDialog.btnLoading = true
      this.$axios({
        url: UcCompanyRelationSave,
        method: 'post',
        data: {
          childrenCompanyId: this.addDialog.radioVal.companyId, // 关联公司id
          childrenCompanyName: this.addDialog.radioVal.companyName // 关联公司名称
        }
      })
        .then(res => {
          this.initial()
        })
        .finally(res => {
          this.addDialog.btnLoading = false
          this.addDialog.visible = false
        })
    },
    searchForm() {
      this.curPage = 1
      this.initial()
    },
    // 页面的初始化加载
    initial() {
      this.submitLoading = true
      this.$axios({
        method: 'GET',
        url: `${UcCompanyRelationPageList}?companyName=${this.formData.companyName}&page=${this.curPage}&pageSize=${this.pageSize}`
      })
        .then(res => {
          try {
            let data = hasIn(res, ['data', 'payload']) ? res.data.payload : []
            this.tableData = data.content
            this.total = data.totalElements
          } catch (err) {
            this.tableData = []
          }
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
    // 删除关联
    delRelation(row) {
      this.$confirm('此操作将取消并删除该公司, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitLoading = true
        this.$axios({
          url: UcCompanyRelationDeleteById,
          method: 'POST',
          data: {id: row.id}
        })
          .then(res => {
            this.initial()
          })
          .finally(() => {
            this.submitLoading = false
          })
      })
    },
    // 重置按钮
    reset() {
      this.formData.companyName = ''
    },
    // 0-待确认，1-已关联，2-已取消，3-已解除
    // 取消关联
    toRelativeHandle(row, toStatus) {
      let relationDesc = {
        1: `在【${row.childrenCompanyName}】组织架构中关联企业`,
        2: `取消与【${row.childrenCompanyName}】的关联绑定请求`,
        3: `取消与【${row.childrenCompanyName}】的关联关系`
      }
      let {relationStatus: status, companyId} = row
      this.$confirm(`此操作将${relationDesc[toStatus]}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitLoading = true
        this.$axios({
          method: 'post',
          url: updateRelationStatus,
          data: {
            id: row.id,
            relationStatus: toStatus
          }
        })
          .then(res => {
            this.initial()
          })
          .finally(() => {
            this.submitLoading = false
          })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.orgainzationManagement {
  .orgainzation-box {
    display: flex;
    flex-direction: column;
    height: 100%;

    .org-table {
      flex: 1;
    }

    .pagination {
      width: 100%;
      text-align: right;
      margin-top: 10px;
    }
  }
  .add-company-dialog {
    height: 500px;
    display: flex;
    flex-direction: column;

    .dialog-checked-all {
      margin: 16px 0;
    }
    .el-radio-group {
      margin-top: 20px;
    }
    .checkbox-box {
      flex: 1;
      overflow: auto;

      .el-radio {
        display: block;
        margin-left: 20px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
